<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../element-plus/index.css" />
  </head>
  <body>
    <div id="box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
    <script src="../vue3.2.45.js"></script>
    <script src="../element-plus/element-plus.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            tableData: [
              {
                date: "2016-05-03",
                name: "Tom",
                address: "No. 189, Grove St, Los Angeles",
                age: 20,
              },
              {
                date: "2016-05-02",
                name: "Tom",
                address: "No. 189, Grove St, Los Angeles",
                age: 21,
              },
              {
                date: "2016-05-04",
                name: "Tom",
                address: "No. 189, Grove St, Los Angeles",
                age: 22,
              },
              {
                date: "2016-05-01",
                name: "Tom",
                address: "No. 189, Grove St, Los Angeles",
                age: 23,
              },
            ],
          };
        },
      });

      app.use(ElementPlus);
      app.mount("#box");
    </script>
  </body>
</html>
